<template>
  <div class="pagehome">
    <div class="homepage-top">
      <div class="top-left">
        <div class="top-left-top">
          <div class="touxiang">
            <el-avatar shape="square" :size="30" :src="squareUrl" class="touxiang"></el-avatar>
          </div>
          <div class="name">
            <div class="nickname">{{userInfo.nickname}}</div>
            <!-- <div class="rolename">{{userInfo.roleName}}</div> -->
            <div class="rolename">web高级开发工程师</div>
          </div>
        </div>
        <div class="top-left-bottom">
          <el-calendar class="top-left-bottom">
            <template slot="dateCell" slot-scope="{date, data}">
              <p
                :class="data.isSelected ? 'is-selected' : ''"
              >{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}</p>
            </template>
          </el-calendar>
          <!--  <el-calendar v-model="value"></el-calendar> -->
        </div>
      </div>
      <div class="top-right">
        <div class="top-right-top">
          <div class="weather">
            <div class="weather-top">今日天气</div>
            <div class="weather-bottom">
              <p>城市：{{weaData.city}}</p>
              <p :class="iconfont">&nbsp;&nbsp;&nbsp;&nbsp;天气状况：{{weaData.wea}}</p>
              <p>风力：{{weaData.win}} {{weaData.win_speed}} {{weaData.win_meter}}</p>
              <p>Tips：{{weaData.air_tips}}</p>
            </div>
          </div>
          <div class="gonggao">
            <div class="p1">通知公告</div>
            <p
              class="p2"
            >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;南京市疾控中心副主任丁洁：从已完成基因测序的病例来看，目前引起南京疫情的毒株是德尔塔毒株。德尔塔毒株目前是全球疫情流行的最主要毒株。从此前相关的疫情来看，德尔塔毒株有一些新的特点，它对身体的适应力增强，传播速度比较快，病毒的载量比较高，治疗时间比较长，也比较容易发展成为重症。</p>
          </div>
        </div>
        <div class="top-right-bottom">
          <div class="gai1">
            <span>任务概况</span>
          </div>
          <div class="gai2">
            <div class="gaikuang" ref="gaikuang"></div>
            <div class="jindu">
              <div class="jin1">本月工作进度完成情况</div>
              <div class="jin2">
                <div
                  v-for="(item,index) in Data"
                  :key="index"
                  class="item-name"
                >{{item.name}}---{{item.value}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="homepage-bottom">
      <div id="zhexian" ref="zhexian"></div>
      <div id="qiwang" ref="qiwang"></div>
    </div>
  </div>
</template>
<script>
import {mapState} from "vuex"
import * as echarts from 'echarts'
import * as api from '@/api'
import {expectApi,lineApi,rateApi} from '@/api'
  export default {
  data () {
    return {
      value: new Date(),
      Data:[],
      weaData:{},
      iconfont:""
    }
  },
  computed:{
    ...mapState(['userInfo','menuShouqi','crubms']),
     squareUrl(){
      return this.userInfo.headimgurl?this.userInfo.headimgurl:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
    },
    },
  methods: {

  },
    mounted(){
      //测试天气接口
      api.getWeatherApi().then(res=>{
        console.log(res.data);
        res.data.data.forEach(item=>{
          this.weaData = item
          this.iconfont = "iconfont icon-"+item.wea_img
          //console.log( this.iconfont);//iconfont icon-yu
        })
      })
    /* 渲染图表 */
    this.$nextTick(()=>{
       // 基于准备好的dom，初始化echarts实例
        let zhexian = echarts.init(this.$refs.zhexian)
        // 绘制图表
        let option = {
          title : {
              text: '成绩比率：',
              },
           legend: {
                data:['学习进度'],
                right: '10%',
                top:"70%"
            },
            xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {
        type: 'value',
        show:false //是否隐藏坐标轴
    },
    xAxis: {
        show:false
    },
     label:{ //提示内容
      show:true,
     /*  formatter:"{b}" //格式化内容 */
     formatter:function(arg){//回调函数
         return arg.name+':'+arg.data+'%'
      }
    },
     toolbox:{
              feature:{
                saveAsImage:{},//导出图片
                dataView:{},//可修改的数据视图
                 magicType:{//动态图表类型切换
                  type:['bar','line']
                },
                dataZoom:{},//区域缩放 两个按钮(选择放大区域 还原)
                restore:{},//重置修改后的数据
              }
            },
    series: [{
        data: [],
        type: 'line',
        smooth: true,
        name:"学习进度"
    }]
        };
         rateApi().then(res=>{
      let data = res.data.data;
      let arr1=[];
      let arr2 = [];
      data.forEach(item=>{
        arr1.push(item.rate)
        arr2.push(item.name)
      })
      option.series[0].data = arr1;
      option.xAxis.data = arr2;
      zhexian.setOption(option)
    })
    }),
    /* 第三个图 期望值 */
    this.$nextTick(()=>{
      let qiwang = echarts.init(this.$refs.qiwang)
      let option= {
  legend: {
        top: '55%',
        left: '80%',
        orient:"vertical",
    },
    toolbox: {
        show: true,
        feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    series: [
        {
            name: '占比',
            type: 'pie',
            radius: [20, 80],
            center: ['55%', '50%'],
            roseType: 'area',
            itemStyle: {
                borderRadius: 8
            },
           data: []//rate title
        }
    ]}
      expectApi().then(res=>{
      let data = res.data.data;
      let sData = data.map(item=>{
        return{
          value:item.rate,
          name:item.title
        }
      })
      option.series[0].data = sData;
      qiwang.setOption(option)
    })
    }),
    /* 第二个图 任务概况 */
    this.$nextTick(()=>{
      let gaikuang = echarts.init(this.$refs.gaikuang)
      let option= {
         tooltip: {
        trigger: 'item'
    },
     toolbox:{
              feature:{
                saveAsImage:{},//导出图片
                dataView:{},//可修改的数据视图
                restore:{},//重置修改后的数据
              }
            },
    legend: {
        top: '45%',
        left: '60%',
        orient:"vertical",
    },
    color: ['#CC66FF', '#00FFCC', '#3399FF	'],//设置环形图颜色
    series: [
        {
            name: '任务概况',
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: true,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 1
            },
            label: {
                show: false
            },
            emphasis: {
                label: {
                    show: false,
                    fontSize: '16',
                    fontWeight: 'bold'
                }
            },
            data: []//value name
        }
    ]
      };
      lineApi().then(res=>{
      let data = res.data.data;
      option.series[0].data = data;
      this.Data = option.series[0].data
      gaikuang.setOption(option)
    })
    })
  },
  
}
</script>

<style lang="less" scoped>
.pagehome {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .homepage-top {
    width: 100%;
    height: 65%;
    display: flex;
    justify-content: space-between;
    .top-left {
      width: 40%;
      height: 100%;
      display: flex;
      flex-direction: column;
      margin-right: 5px;
      .top-left-top {
        width: 100%;
        height: 40%;
        background: rgba(146, 224, 243, 0.4);
        border-radius: 10px;
        margin-bottom: 5px;
        display: flex;
        align-items: center;
        & /deep/ .touxiang {
          margin-left: 30px;
          span {
            margin-bottom: 20px;
          }
          .el-avatar {
            width: 100px !important;
            height: 100px !important;
            margin-top: 30px;
          }
        }
        .name {
          display: flex;
          flex-direction: column;
          justify-content: center;
          margin-left: 90px;
          .nickname {
            height: 30px;
          }
        }
      }

      .top-left-bottom {
        .el-calendar {
          background: rgba(146, 224, 243, 0.4);
          border-radius: 10px;
          width: 100%;
          height: 100%;
          font-size: 12px;
          & /deep/ .el-calendar__header {
            padding: 0 !important;
            line-height: 10px;
            font-weight: 800;
          }
          & /deep/ .el-calendar__body {
            width: 100%;
            height: 55%;
            padding: 0;
            .el-calendar-table {
              height: 55%;
              thead {
                th {
                  padding: 0 !important;
                  font-weight: 500;
                }
              }
            }
          }
        }
      }
    }
    .top-right {
      width: 60%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .top-right-top {
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: space-around;
        margin-bottom: 5px;
        .weather {
          width: 40%;
          height: 100%;
          background: rgba(146, 224, 243, 0.4);
          border-radius: 10px;
          margin-right: 5px;
          .weather-top {
            line-height: 16px;
            width: 100%;
            margin: 10px 0;
            font-weight: 800;
          }
          .weather-bottom {
            width: 100%;
            font-size: 14px;
            line-height: 14px;
          }
        }
        .gonggao {
          width: 60%;
          height: 100%;
          background: rgba(146, 224, 243, 0.4);
          border-radius: 10px;
          .p1 {
            font-size: 18px;
            font-weight: 800;
            margin: 10px 0;
          }
          .p2 {
            font-size: 14px;
            margin: 0 30px;
            line-height: 25px;
          }
        }
      }
      .top-right-bottom {
        width: 100%;
        height: 50%;
        display: flex;
        flex-direction: column;
        background: rgba(146, 224, 243, 0.4);
        border-radius: 10px;
        .gai1 {
          height: 10%;
          font-size: 14px;
          font-weight: 800;
          position: relative;
          span {
            position: absolute;
            left: 20px;
            top: 5px;
            font-size: 16px;
            line-height: 16px;
          }
        }
        .gai2 {
          height: 90%;
          display: flex;
          justify-content: space-around;
          .gaikuang {
            width: 40%;
            height: 100%;
          }
          .jindu {
            width: 60%;
            height: 100%;
            .jin1 {
              font-weight: 800;
              line-height: 50px;
            }
            .jin2 {
              display: flex;
              justify-content: center;
              line-height: 80px;
              .item-name {
                float: left;
                padding: 0 10px;
              }
            }
          }
        }
      }
    }
  }
  .homepage-bottom {
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    #zhexian {
      width: 50%;
      height: 100%;
      background: rgba(146, 224, 243, 0.4);
      border-radius: 10px;
    }
    #qiwang {
      width: 50%;
      height: 100%;
      margin-left: 5px;
      padding-right: 100px;
      background: rgba(146, 224, 243, 0.4);
      border-radius: 10px;
    }
  }
}
.is-selected {
  color: #1989fa;
}
&/deep/.el-calendar-day {
  padding: 0;
  height: 15px;
  p {
    padding: 0;
    height: 15px;
  }
}
&/deep/ .el-calendar-table__row {
  line-height: 5px;
  font-size: 12px;
}
& /deep/ .el-button-group > .el-button {
  background: rgba(146, 224, 243, 0.4);
  border-top-right-radius: 10px;
}
</style>